<template>
  <div class="container">
    <el-form :model="this.homeworkData" label-width="120px" class="detailedData">
        <el-form-item :label="table.name" prop="title">
            <el-input v-model="homeworkData.title" disabled/>
        </el-form-item>
        <el-form-item :label="table.introduction" prop="content">
            <el-input v-model="homeworkData.content" 
                type="textarea"
                rows="3"
                disabled />
        </el-form-item>
        <el-form-item :label="table.appendix"
            v-if="ifHasFile">
            <el-button @click="downloadHw()"><span>下载</span></el-button>
        </el-form-item>
        <!-- -----------------------------------------------------------------已提交作业表格栏---------------------------------- -->
        <el-form-item :label="table.submitted" prop="students">
            <el-table
                :data="this.homeworkData.submittedVos"
                border
                fit
                height="200px"
                max-height="200px"
                highlight-current-row
                style="width: 100%;"
            >
                <el-table-column
                :label="userDataTable.id"
                type="index"
                align="center"
                width="80px"
                >
                </el-table-column>
                <el-table-column
                :label="userDataTable.name"
                prop="name"
                align="center"
                width="80px"
                >
                </el-table-column>
                <el-table-column
                :label="userDataTable.submitTime"
                prop="submitTime"
                align="center"
                width="180px"
                >
                </el-table-column>
                <el-table-column
                :label="userDataTable.state"
                prop="state"
                align="center"
                width="180px"
                >
                </el-table-column>
                <el-table-column
                :label="userDataTable.score"
                prop="score"
                align="center"
                width="180px"
                >
                </el-table-column>
                <el-table-column
                :label="userDataTable.actions"
                align="center"
                min-width="100px"
                >
                <template #default="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="del(scope.row)"
                    >
                    {{ userDataTable.del }}
                    </el-button>
                </template>
                </el-table-column>
            </el-table>     
        </el-form-item>
       <el-form-item :label="table.unsubmitted" prop="students"><!-- -----------------------------------------------------------------未提交作业表格栏---------------------------------- -->
        <el-table
            :data="this.homeworkData.unsubmittedVos"
            border
            fit
            height="200px"
            max-height="200px"
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column
            :label="userDataTable.id"
            type="index"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.headPortrait"
            prop="headPortrait"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.name"
            prop="name"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.sex"
            prop="sex"
            align="center"
            width="80px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.phoneNumber"
            prop="phoneNumber"
            align="center"
            width="180px"
            >
            </el-table-column>
            <el-table-column
            :label="userDataTable.actions"
            align="center"
            min-width="100px"
            >
            <template #default="scope">
                <el-button
                size="mini"
                type="danger"
                @click="del(scope.row)"
                >
                {{ userDataTable.del }}
                </el-button>
            </template>
            </el-table-column>
        </el-table>     
      </el-form-item>
    </el-form>

    <!-- *******************************   对话框    *********************************************** -->
    <el-dialog
    v-model="QueryInfoVisible"
    title="基本信息"
    width="60%"
    draggable="true"
    >
    <el-form :model="classDetailedData" label-width="120px">
        <el-form-item label="头像" prop="headPortrait">
        <el-input v-model="headPortrait" disabled="true"/>
        </el-form-item>
        <el-form-item label="班级名称：" prop="name">
        <el-input v-model="name" disabled="true"/>
        </el-form-item>
        <el-form-item label="学生数量：" prop="stuNumber">
        <el-input v-model="stuNumber" disabled="true" />
        </el-form-item>
        <el-form-item label="教师数量：" prop="teaNumber">
        <el-input v-model="teaNumber" disabled="true" />
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button @click="QueryInfoVisible = false">Cancel</el-button>
        <el-button type="primary" @click="QueryInfoVisible = false"
            >Confirm</el-button
        >
        </span>
    </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const dataMap = reactive({
       homeworkData: '',
       table: {
           name: '作业题目：',
           introduction: "作业内容:",
           appendix:"附件下载",
           unsubmitted: "未提交名单：",
           submitted: "已提交名单："
       },
       userDataTable: {
           id:"编号",
           headPortrait: "头像",
           name: "名称",
           sex: "性别",
           phoneNumber: "手机号",
           submitTime: "提交时间",
           correctTime: "批改时间",
           score: "分数",
           state: '批阅状态', 
           actions: "行为",
           del: "删除"
       },
      //  表示是否该subject有附件
       ifHasFile: "",
    })
    onMounted(() => {
              
    })
    
    return {
      ...toRefs(dataMap)
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 获取班级详细信息
    getClassgradeDetailedInfo() {
        var _this = this
        let formData = new FormData()
        formData.append('subId',this.$route.params.id)
        this.$axios
            .post('/teacher/homework/list/detailedinfo',formData)
            .then( response => {
                let stateCode = response.headers["state"]
                if(stateCode=="200"){
                  this.homeworkData = response.data
                  if(this.homeworkData.ctype!=0) this.ifHasFile = true
                  else this.ifHasFile = false
                }
                else if(stateCode==null){
                    this.$message.success("请求数据异常！")
                }
                else{
                    this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                }

            })
            .catch(function (error){
                let stateCode = error.response.headers["state"]                            
                if(stateCode!=null){
                    _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                }
                else{
                    _this.$message.error("后端异常")
                }
            })
            .then(function (){
                console.log("测试成功")
            }) 
    },
    // 下载作业附件
    downloadHw(){
        // let formData = new FormData()
        // formData.append('targetId',this.homeworkData.id)
        this.$axios({
          url : '/file/download2',
          method: 'post',
          params:{
            targetId: this.homeworkData.id
          },
          responseType: 'blob'
        }).then((result)=>{
          if(result.data.size==0) {
            this.$message.error("文件下载失败！！文件不存在")
          }
          var blob = new Blob([result.data], {
                type:
                    'application/octet-stream;charset=utf-8',
              })
                    
        let contentDisposition = result.headers["content-disposition"].split("\\")
        let filename = contentDisposition[contentDisposition.length-1];
        this.$message.success("文件" + filename + "下载成功！")
        
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
    // 删除学生
    del(user) {
        ElMessageBox.confirm('你确定删除用户"' + user.name +  '"吗？', '警告',
            {
                confirmButtonText: 'Yes',
                cancelButtonText: 'Cancel',
                type: 'warning',
            }
        )
            .then(() => {
                console.log(user.userId)
                let formData = new FormData()
                formData.append('userId',user.userId)
                this.$axios
                    .post('teacher/userclassgrade/del',formData)
                    .then(response=> {
                        console.log(response)                        
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        this.getClassgradeDetailedInfo()
                    })
                    .catch(function (error){
                        console.log(error)
                    })
                    .then(function (){
                        console.log("测试成功")
                    }) 
            })
            .catch(() => {
                ElMessage({
                    type: 'error',
                    message: '已取消删除',
                })
            })
    }
  },
  mounted() {
    this.getClassgradeDetailedInfo()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 5%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }
  
  .filter-item {
    display: inline-block;
  }

  .table-container {
    height: 95%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .detailedData {
    /* height: 80%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start; */
    box-sizing: border-box;
  }
</style>